<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #box {
      width: 400px;
      height: 400px;
      background: darkgreen;
      margin-top: 50px;
      margin-left: 50px;
      position: relative;
      overflow: auto;
    }

    #con {
      width: 800px;
      height: 800px;
      background: #ff8c00;
      position: absolute;
      left: 80px;
      top: 80px;
    }
  </style>
</head>

<body>
  <div id="box">
    <div id="con"></div>
  </div>
  <button>滚动300</button>
  <script src="./jquery-3.4.1.min.js"></script>
  <script>

    // position() 获取相对父元素的偏移量 返回对象    {top:200,left:300}
    var pos = $("#con").position()
    console.log(pos)
    console.log(pos.top)
    //offset() 获取匹配元素在当前视口的相对偏移。 {top:130,left:130}
    var off = $("#con").offset()
    console.log(off)
    //scrollTop() 获取和设置元素的上滚动距离
    //scrollLeft() 获取和设置元素的左滚动距离
    $("button").click(function () {

      $("#box").scrollTop(300)
      $("#box").scrollLeft(300)
    })


  </script>
</body>

</html>